@{
    ViewData["Title"] = "添加设备点检保养项目";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>@ViewData["Title"]</title>
    <!-- 引入layui CSS -->
    <link rel="stylesheet" href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css">
    
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f2f2f2;
        }
        .form-container {
            padding: 20px;
            background-color: #fff;
            height: 100vh;
            overflow-y: auto;
        }
        .form-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
            border-bottom: 2px solid #1E9FFF;
            padding-bottom: 10px;
        }
        .layui-form-label {
            width: 120px;
        }
        .layui-input-block {
            margin-left: 150px;
        }
        .required-star {
            color: red;
            margin-right: 3px;
        }
        .button-area {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e6e6e6;
            text-align: center;
        }
        .layui-textarea {
            min-height: 100px;
        }
    </style>
</head>
<body>

<div class="form-container">
    <div class="form-title">
        <i class="layui-icon layui-icon-add-1"></i> 添加设备点检保养项目
    </div>

    <form class="layui-form" lay-filter="addForm" id="addForm">
        <!-- 项目编码行 -->
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required-star">*</span>项目编码
            </label>
            <div class="layui-input-block">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <input type="text" name="ProjectCode" lay-verify="required" placeholder="请输入项目编码" autocomplete="off" class="layui-input" id="projectCodeInput">
                    </div>
                    <div class="layui-col-md6" style="padding-left: 15px;">
                        <input type="checkbox" name="AutoGenerateCode" lay-skin="switch" lay-text="自动生成|手动输入" lay-filter="autoCodeSwitch" title="自动生成">
                        <span style="margin-left: 10px; color: #666; font-size: 12px;">开启后将自动生成项目编码</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 项目名称 -->
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required-star">*</span>项目名称
            </label>
            <div class="layui-input-block">
                <input type="text" name="ProjectName" lay-verify="required" placeholder="请输入项目名称" autocomplete="off" class="layui-input">
            </div>
        </div>

        <!-- 项目类型 -->
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required-star">*</span>项目类型
            </label>
            <div class="layui-input-block">
                <select name="ProjectType" lay-verify="required" lay-filter="projectTypeSelect">
                    <option value="">请选择项目类型</option>
                    <option value="设备点检">设备点检</option>
                    <option value="设备保养">设备保养</option>
                </select>
            </div>
        </div>

        <!-- 项目内容 -->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">
                <span class="required-star">*</span>项目内容
            </label>
            <div class="layui-input-block">
                <textarea name="ProjectContent" lay-verify="required" placeholder="请输入项目内容" class="layui-textarea"></textarea>
            </div>
        </div>

        <!-- 标准 -->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">标准</label>
            <div class="layui-input-block">
                <textarea name="Standard" placeholder="请输入标准（可选）" class="layui-textarea"></textarea>
            </div>
        </div>

        <!-- 是否启用 -->
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                <input type="radio" name="IsEnabled" value="true" title="是" checked="">
                <input type="radio" name="IsEnabled" value="false" title="否">
            </div>
        </div>

        <!-- 备注 -->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="Remark" placeholder="请输入备注（可选）" class="layui-textarea"></textarea>
            </div>
        </div>

        <!-- 按钮区域 -->
        <div class="button-area">
            <button type="submit" class="layui-btn" lay-submit lay-filter="submitForm">
                <i class="layui-icon layui-icon-ok"></i> 确定
            </button>
            <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">
                <i class="layui-icon layui-icon-close"></i> 取消
            </button>
        </div>
    </form>
</div>

<!-- 引入jQuery -->
<script src="~/libs/jquery/jquery.js"></script>
<!-- 引入layui JS -->
<script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>

<script>
// 等待页面DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    console.log('Add页面DOM加载完成');
    
    // 检查layui是否正确加载
    if (typeof layui === 'undefined') {
        console.error('layui未正确加载！');
        alert('layui框架加载失败，请检查网络连接！');
        return;
    }
    
    console.log('layui已加载，版本:', layui.version);
    
    layui.use(['form', 'layer'], function(){
        var form = layui.form;
        var layer = layui.layer;
        
        console.log('layui模块加载完成');
        
        // 监听自动生成编码开关
        form.on('switch(autoCodeSwitch)', function(data){
            console.log('自动生成开关:', data.elem.checked);
            var projectCodeInput = document.getElementById('projectCodeInput');
            
            if (data.elem.checked) {
                // 开启自动生成
                projectCodeInput.disabled = true;
                projectCodeInput.placeholder = '将根据项目类型自动生成';
                projectCodeInput.value = '';
                // 如果已选择项目类型，立即生成编码
                var projectType = $('select[name="ProjectType"]').val();
                if (projectType) {
                    generateProjectCode(projectType);
                }
            } else {
                // 手动输入
                projectCodeInput.disabled = false;
                projectCodeInput.placeholder = '请输入项目编码';
                projectCodeInput.value = '';
            }
        });
        
        // 监听项目类型选择
        form.on('select(projectTypeSelect)', function(data){
            console.log('项目类型选择:', data.value);
            var autoCodeSwitch = $('input[name="AutoGenerateCode"]')[0];
            if (autoCodeSwitch && autoCodeSwitch.checked) {
                // 如果开启了自动生成，根据项目类型生成编码
                generateProjectCode(data.value);
            }
        });
        
        // 生成项目编码
        function generateProjectCode(projectType) {
            if (!projectType) return;
            
            console.log('生成项目编码:', projectType);
            $.ajax({
                url: '@Url.Action("GenerateProjectCode", "Maintenanceplan", new { area = "ProductionSystem" })',
                type: 'GET',
                data: { projectType: projectType },
                success: function(result) {
                    console.log('编码生成结果:', result);
                    if (result.success) {
                        $('#projectCodeInput').val(result.data);
                    } else {
                        layer.msg('生成项目编码失败: ' + result.message, {icon: 2});
                    }
                },
                error: function() {
                    layer.msg('网络错误，无法生成项目编码', {icon: 2});
                }
            });
        }
        
        // 监听表单提交
        form.on('submit(submitForm)', function(data){
            console.log('表单提交:', data.field);
            
            // 显示加载层
            var loadingIndex = layer.load(1, {
                shade: [0.1, '#fff']
            });
            
            $.ajax({
                url: '@Url.Action("Create", "Maintenanceplan", new { area = "ProductionSystem" })',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function(result) {
                    layer.close(loadingIndex);
                    console.log('创建结果:', result);
                    
                    if (result.success) {
                        layer.msg(result.message, {icon: 1}, function() {
                            // 使用全局页面导航工具返回并刷新列表
                            if (window.PageNavigator) {
                                window.PageNavigator.onSuccess('创建成功', function() {
                                    // 刷新父页面表格
                                    if (parent && parent.refreshMaintenanceplanTable) {
                                        parent.refreshMaintenanceplanTable();
                                    }
                                });
                            } else {
                                // 降级处理
                                if (parent && parent.refreshMaintenanceplanTable) {
                                    parent.refreshMaintenanceplanTable();
                                }
                                if (parent && parent.loadPage) {
                                    parent.loadPage('@Url.Action("Index", "Maintenanceplan", new { area = "ProductionSystem" })');
                                } else {
                                    history.back();
                                }
                            }
                        });
                    } else {
                        layer.msg(result.message, {icon: 2});
                    }
                },
                error: function() {
                    layer.close(loadingIndex);
                    layer.msg('网络错误，请稍后重试', {icon: 2});
                }
            });
            
            return false; // 阻止表单跳转
        });
        
        // 取消按钮事件
        $('#cancelBtn').on('click', function() {
            console.log('点击取消按钮');
            layer.confirm('确定要取消吗？未保存的数据将丢失', {
                btn: ['确定', '继续编辑'],
                title: '取消确认'
            }, function(index) {
                layer.close(index);
                // 使用全局页面导航工具返回
                if (window.PageNavigator) {
                    window.PageNavigator.goBack();
                } else {
                    // 降级处理
                    if (parent && parent.loadPage) {
                        parent.loadPage('@Url.Action("Index", "Maintenanceplan", new { area = "ProductionSystem" })');
                    } else {
                        history.back();
                    }
                }
            });
        });
        
        console.log('Add页面事件绑定完成');
    });
});
</script>

</body>
</html> 